<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TOTEG&reg;</title>
<link rel="stylesheet" type="text/css" href="css/help_page.css" media="screen" />
</head>

<body style="background-color: white">
<h1 align="center"><font face="Stencil"><a name="top"><img src="images/helptoteg.png" alt="Open project" height="201" width="400" /></a></font></h1>
<br/><br/>

<!-- Contents -->
<div id="help_contents">
	<p>
	<a href="#about">About The Online Team Estimation Game&reg;</a>
	</p>
	
	<p>
	<a href="#register">Registering</a>
	</p>
	
	<p>
	<a href="#login">Logging in</a>
	</p>
	
	<p>
	<a href="#terminate">Close Account</a>
	</p>
	
	<p>
	<a href="#see_projects">Projects list</a>
	</p>
	
	<p>
	<a href="#create_project">Create a new project</a>
	</p>
	
	<p>
	<a href="#open_project">Open a project</a>
	</p>
	
	<p>
	<a href="#delete_project">Delete a project</a>
	</p>
	
	<p>
	<a href="#create_user_stories">Create user stories</a>
	</p>
	
	<p>
	<a href="#size">User story sizing</a>
	</p>
	
	<p>
	<a href="#edit">Editing user stories</a>
	</p>
	
	<p>
	<a href="#delete_user_stories">Delete user stories</a>
	</p>
	
	<p>
	<a href="#num_cards">Number of user story cards on a pile</a>
	</p>
	
	<p>
	<a href="#export_user_stories">Export project to CSV file</a>
	</p>
	
	<p>
	<a href="#participants">Participants list</a>
	</p>
	
	<p>
	<a href="#add_participants">Add participants (pigs)</a>
	</p>
	
	<p>
	<a href="#chickens">Add spectators (chickens)</a>
	</p>
	
	<p>
	<a href="#chat">Chat</a>
	</p>
	
	<p>
	<a href="#shortcuts">Keyboard shortcuts</a>
	</p>
</div>

<!-- End of Contents -->



<h2 id=help_title><a name="about"></a>About The Online Team Estimation Game&reg;</h2>
<h4 id="help_paragraph"><span class="italic">The Online Team Estimation Game&reg;</span> (TOTEG&reg;) takes the traditional Team Estimation Game to a new world - the virtual world.<br /> 
	<span class="italic">TOTEG&reg;</span> lets teams that are physically separated to get together and create and estimate user stories.<br /> 
	For information on how Team Estimation Game is set up and played visit <a href="http://www.netobjectives.com/resources/articles/team-estimation-game" target="_blank">NetObjectives.</a>
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="register"></a>Registration</h2>
<h4 id="help_paragraph">To register, you can enter any character you want.<br /> 
	Spaces are not allowed.<br /> 
	The username and password must be at least one character long.<br />
	Note: it is up to you to choose a "sense-making" username.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="login"></a>Logging in</h2>
<h4 id="help_paragraph">To log in, you must register first.</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="terminate"></a>Close Account</h2>
<h4 id="help_paragraph">To terminate your account click on <img src="images/closeAccnt.png" alt="Delete Account" height="35" width="35" />.</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="see_projects"></a>Projects List</h2>
<h4 id="help_paragraph">All projects associated with you, i.e. you have created or you participate in, are displayed in a drop down selection box.</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="create_project"></a>Create new project</h2>
<h4 id="help_paragraph">To create a project, click on <img src="images/np_bt.png" alt="Open project" height="20" width="200" /> or use &lt; Alt &gt; &lt; P &gt; key combination.<br />
	Naming your project requires a name that is not already in use.<br />
	For example, if there is a project named 'Apples', you cannot name your project 'Apples' nor 'apples'.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="open_project"></a>Open a project</h2>
<h4 id="help_paragraph">To open a project, select a project from the projects list and click on<img src="images/open_bt.png" alt="Open project button" height="35" width="35" /> or use &lt; Alt &gt; &lt; O &gt; key combination.</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="delete_project"></a>Delete a project</h2>
<h4 id="help_paragraph">To delete a project, select a project from the projects list and click on <img src="images/delete_bt.png" alt="Delete project button" height="35" width="35" /> or use &lt; Alt &gt; &lt; X &gt; key combination.<br />
	If you are the creator of the project that you are deleting, the project will be removed from all participants' "Projects List".<br />
	If you are not the creator of the project that you are deleting, the project will be removed ONLY from your "Projects List"
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="create_user_stories"></a>Create user stories</h2>
<h4 id="help_paragraph">To create a new story, click on <img src="images/ns.png" alt="create user stories" height="20" width="50" /> or use &lt; Alt &gt; &lt; S &gt; key combination.<br/>
		You can type up to 180 chracters in the body of the user story.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="size"></a>User story sizing</h2>
<h4 id="help_paragraph">Assigning points to user stories is done in batch.<br />
	To do so, choose to use from either Fibonacci numbers or from Powers of 2.<br />
	Numbers unique to Fibonacci sequence are colored green.<br />
	Numbers unique to Powers of 2 are colored red.<br />
	Numbers that are used in both Fibonacci and Powers of 2 modes are in black.<br />
	All the cards in the pile get the same size.<br />
	NOTE: The game is best played with user stories, that is, stories with size up to 13 points.<br/>
	Using the numbers that have the plus (+) sign beside them indicate that the stories are Epics.<br/>
	To reset a story card's point, just drag the card back to the initial pile.<br /><br/>
	<img src="images/points.png" alt="sizing" height="223" width="156" />
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="edit"></a>Edit user stories</h2>
<h4 id="help_paragraph">To edit a story, click <img src="images/edit.png" alt="Delete user stories" height="25" width="25" /> on the upper right corner of the card.<br/>
	When a card is being moved or hovered over, it gets a red border in order to show all users that somebody is manipulating it.<br/><br/>
	<img src="images/redBorder.png" alt="Delete user stories" height="336" width="298" />
	</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="delete_user_stories"></a>Delete user stories</h2>
<h4 id="help_paragraph">To delete a story, drag the story to <img src="images/trashbin_wire.png" alt="Delete user stories" height="35" width="35" /> .<br />
	If you are the creator of the project, the project will be removed from 'Projects List' of all participating users as well as all chickens involved with the project.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="num_cards"></a>Number of user story cards on a pile</h2>
<h4 id="help_paragraph">You can see the number of cards that are in each pile.<br />
	This number is displayed in the orange circle by the 'Size' drop down selection box.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="export_user_stories"></a>Export project to CSV file</h2>
<h4 id="help_paragraph">You can save all user stories and their points into a .CSV file.
	To do so, click on <img src="images/exp.png" alt="Export project button" height="20" width="50" /> or use &lt; Alt &gt; &lt; Z &gt; key combination. 
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="participants"></a>Participants list</h2>
<h4 id="help_paragraph">All participants (pigs) that are currently online appear in green color with a green cirlce beside them.<br/>
	All spectators (chickens) that are currently online appear in blue color with a blue circle beside them.<br/>
	All participants that are currently off line appear in red color with a red cirlce beside them.<br /><br/>
	<img src="images/usersdiv.png" alt="Participants pane" height="204" width="154" />
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="add_participants"></a>Add participants (pigs)</h2>
<h4 id="help_paragraph">You can add team mates  to a project.
	To do so, enter the username of the person you want to add.<br />
	NOTE: You can add as many participant as you want.<br /><br/>
	<img src="images/addusr.png" alt="Add participants" height="88" width="154" />
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="chickens"></a>Add spectators (chickens)</h2>
<h4 id="help_paragraph">"Chickens" are users who cannot play but can only watch.<br /> 
	To add a user as "chicken", check the 'chicken' box.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="chat"></a>Chat</h2>
<h4 id="help_paragraph">All participants (pigs) in a project can communicate using the chat.<br /> 
	Each time you log in you are assigned a color. This color is your identification while chatting, i.e, your name is in the assigned color.
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

<h2 id=help_title><a name="shortcuts"></a>Keyboard shortcuts</h2>
<h4 id="help_paragraph">You can use the following key combinations to do certain operations while playing the game.<br/>
	NOTE: Not all browsers support the short cuts. All of them work on Google Chrome.<br/>
	<table cellpadding="40">
		<tr>
			<td>Delete a project:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/x.png" alt="x" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>Export projects to CSV file:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/z.png" alt="z" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>Help:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/h.png" alt="h" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>Log out:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/l.png" alt="l" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>New project:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/p.png" alt="p" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>New story:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/s.png" alt="s" height="48" width="45" /></td>
		</tr>
		
		<tr>
			<td>Open project:</td>
			<td><img src="images/alt.png" alt="alt" height="48" width="45" /></td>
			<td><img src="images/o.png" alt="o" height="48" width="45" /></td>
		</tr>
	</table>
</h4>
<p>
	<a style="font-style: italic; font-weight: bold; color: #9800F0; text-decoration: none" href="#top">Back to top &uarr;</a>
</p>

</body>
</html>